<template>
    <div class="article-box">
        <Content :article-detail="articleDetail"></Content>
        <Like :is-like="articleDetail.isLike" :like-count="articleDetail.like_count"></Like>
        <Comment :comment-list="commentList" :user="user"></Comment>
        <Modal-login v-ref:modal></Modal-login>
        <Scrolltop></Scrolltop>
    </div>
</template>
<style>

</style>
<script>
    import {getArticleDetail,getCommentList,addComment,addReply,toggleLike} from '../../vuex/actions'
    import Content from './content.vue'
    import Like from './like.vue'
    import Comment from './comment.vue'
    import Scrolltop from '../ScrollTop/index.vue'
    import ModalLogin from '../Login/modalLogin.vue'
    export default{
        methods:{
            handleSubmitComment(content){
                if(this.user && content.trim() !== ''){
                    this.addComment({aid:this.$route.params.id, content: content})
                }else{
                    this.openLoginModal()
                }
            },
            handleSubmitReply(cid,content){
                if(this.user && content.trim() !== ''){
                    this.addReply(cid,{content:content})
                }else{
                    this.openLoginModal()
                }
            },
            handleToggleLike(){
                if (this.user ){
                    this.toggleLike(this.id)
                }else {
                    this.openLoginModal()
                }

            },
            openLoginModal(){
                this.$refs.modal.showModal()
            }
        },
        components:{
            Content,
            Like,
            Comment,
            Scrolltop,
            ModalLogin
        },
        route:{
            data({to:{params:{id}}}){
                this.getArticleDetail(id,this.user)
                this.getCommentList(id)
            }
        },
        vuex:{
            getters:{
                articleDetail: ({articleDetail}) => articleDetail.item,
                user: ({auth}) => auth.user,
                commentList:({commentList}) => commentList.items,
                id: ({route}) => route.params.id,
            },
            actions:{
                getArticleDetail,
                getCommentList,
                addComment,
                addReply,
                toggleLike
            }
        }
    }
</script>
